/*
 * @Author: 薛严 348352046@qq.com
 * @Date: 2022-11-05 15:52:12
 * @LastEditors: 薛严 348352046@qq.com
 * @LastEditTime: 2022-11-18 18:31:49
 * @FilePath: /vite-react-template/src/pages/index/Index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { Breadcrumb, Layout, Image } from 'antd';
import React, { useState } from 'react';
import { Outlet, } from 'react-router-dom'
import logo from '../../assets/image/logo.jpeg'
const { Header, Content, Footer, Sider } = Layout;
import MainMenu from '@/compontents/Index/MainMenu'

const Index: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 左边侧边栏 */}
      <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
        <div className="logo" >
          <Image
            width={32}
            src={logo}
          />
          鎏嫣宫
        </div>
        {/* 点击是否收起 */}
       <MainMenu/>
      </Sider>
      {/* 右边布局 */}
      <Layout className="site-layout">
        {/* 右边头部 */}
        <Header className="site-layout-background" style={{ padding: 0 }} >
          {/* 面包屑 */}
          <Breadcrumb style={{ lineHeight: '64px', paddingLeft: '16px' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
        </Header>
        {/* 右边内容 */}
        <Content style={{ margin: '16px 16px 0' }} className='site-layout-background'>
          {/* 窗口部分 */}
          <Outlet/>
        </Content>
        {/* 右边底部 */}
        <Footer style={{ textAlign: 'center', lineHeight: '48px', padding: 0 }}>Vite React Template ©2022 Created by 鎏嫣宫守护 </Footer>
      </Layout>
    </Layout>
  );
};

export default Index;